<template>
	<view class="home_category">
		<navigator class="cate_item" v-for="item in category" :key="item.id" :url="`/pages/imgCategory/imgCategory?id=${item.id}`">
			<image :src="item.cover" mode="aspectFill"></image>
			<view class="cate_name">
				{{item.name}}
			</view>
		</navigator>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				category: []
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			getList() {
				this.request({
					url: 'http://157.122.54.189:9088/image/v1/vertical/category'
				}).then(result => {
					this.category = result.res.category;
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.home_category{
		display: flex;
		flex-wrap: wrap;
		
		
		.cate_item{
			position: relative;
			width: 33.33%;
			image{
				border: 5rpx solid #FFFFFF;
				height: 240rpx;
			}
			.cate_name{
				position: absolute;
				width: 100%;
				height: 40rpx;
				left: 0;
				bottom: 10rpx;
				color: #FFFFFF;
				font-size: 35rpx;
				display: flex;
				align-items: center;
				padding-left: 20rpx;
			}
		}
	}
</style>
